<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>忘记密码</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue_resource.js"></script>
		<!-- Bootstrap core CSS-->
		<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- Custom fonts for this template-->
		<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<!-- Custom styles for this template-->
		<link href="css/sb-admin.css" rel="stylesheet">
		<style type="text/css">
			body{
				background-image: url(image/1.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.input{
				background: none;
			}
			.font{
				/*color:white;*/
			}

		</style>
	</head>

	<body>
		<div class="container" id="forget">
			<div class=" card card-login mx-auto mt-5" style="background-color: rgba(0,0,0,0.1);">
				<div class="card-header font">忘记密码</div>
				<div class="card-body">
					<div class="text-center mt-4 mb-5 font">
						<h4>忘记密码?</h4>
						<p>输入您的用户名和邮件地址，我们将发送验证码至您的邮件。</p>
					</div>
					<form>
						<div class="form-group font">
							<span id="s1"></span>
							<input @blur="verify1()" class="form-control input" v-model="username" id="exampleInputEmail1" type="text" aria-describedby="emailHelp" placeholder="用户名">
						</div>
						<div class="form-group font">
							<span id="s2"></span>
							<input @blur="verify2()" class="form-control input" v-model="email" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" placeholder="邮箱">
						</div>
						<a class="btn btn-block" @click="post()" style="background-color: #E0E0E0;">发送</a>
					</form>
					<div class="text-center">
						<a class="d-block small" href="login.html">登录</a>
					</div>
				</div>
			</div>
		</div>
		<!-- Bootstrap core JavaScript-->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
		<!-- Core plugin JavaScript-->
		<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
		<script>
			var url = "http://localhost:8082/";
			/*用户名*/
			var reg1 = /^[a-zA-Z]{1}\w{5,12}$/;
			/*邮箱*/
			var reg2 = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
			var vm = new Vue({
				el: "#forget",
				data: {
					msg: "",
					username: "",
					email: ""
				},
				methods: {
					verify1(){
						if(reg1.test(vm.username)) {
							document.getElementById("s1").innerHTML = "√";
							document.getElementById("s1").style.color = "green";
						}
						if(!reg1.test(vm.username)) {
							document.getElementById("s1").innerHTML = "格式错误，以字母开头的6-12位字符，包含下划线";
							document.getElementById("s1").style.color = "red";
						}
					},
					verify2(){
						if(reg2.test(vm.email)) {
							document.getElementById("s2").innerHTML = "√";
							document.getElementById("s2").style.color = "green";
						}
						if(!reg2.test(vm.email)) {
							document.getElementById("s2").innerHTML = "邮箱格式错误，满足邮箱规则，名称@域名";
							document.getElementById("s2").style.color = "red";
						}
					},
					post() {						
						if(reg1.test(vm.username) == true && reg2.test(vm.email) == true) {
							this.$http.post(url+'sendCodeToEmail', {
								userName: vm.username,
								email: vm.email
							}, {
								emulateJSON: true
							}).then(
								function(res) {
									vm.msg = res.body;
									if(vm.msg.success == true) {
										alert(vm.msg.msg);
										location.href = "reset-password.html";
									} else {
										alert(vm.msg.msg);
										location.href = "forgot-password.html";
									}
								},
								function() {
									console.log("连接失败！");
								}
							)
						}
					}
				}
			})
		</script>
	</body>

</html>